<template>
  <div class="main">
    <el-table
      :data="userSchemeRecords"
      style="width: 100%"
      :row-class-name="tableRowClassName">

      <el-table-column
        prop="prno"
        label="方案名称"
        width="120">
      </el-table-column>

      <el-table-column
        prop="uno"
        label="用户昵称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="usrdate"
        label="购买时间"
        width="150px">
      </el-table-column>

      <el-table-column
        prop="usrprice"
        label="价格"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        prop="usrtime"
        label="支付时间">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditUserSchemeRecord(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteUserSchemeRecord(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageInfo.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageInfo.itemCount">
      </el-pagination>
    </div>
    <el-button size="mini" @click="handleAddUserSchemeRecord">
      新增
    </el-button>
    <addUserSchemeRecord v-if="addDialogIsShow" ref="showAddUserSchemeRecord"></addUserSchemeRecord>
    <editUserSchemeRecord v-if="editDialogIsShow" ref="showEditUserSchemeRecord"></editUserSchemeRecord>
    <deleteUserSchemeRecord v-if="deleteDialogIsShow" ref="showdeleteUserSchemeRecord"></deleteUserSchemeRecord>


  </div>
</template>

<script>
  import api from "../../../../axios/api"
  import addUserSchemeRecord from '@/components/back/userSchemeRecord/addUserSchemeRecord.vue'
  import editUserSchemeRecord from '@/components/back/userSchemeRecord/editUserSchemeRecord.vue'
  import deleteUserSchemeRecord from '@/components/back/userSchemeRecord/deleteUserSchemeRecord.vue'
  import utilsFd from '../../../../static/js/utils/index.js'

  export default {
    name: "index",
    addDialogIsShow: false,
    editDialogIsShow: false,
    components: {
      addUserSchemeRecord, editUserSchemeRecord, deleteUserSchemeRecord
    },
    data() {
      return {
        userSchemeRecords: [],
        addDialogIsShow: false,
        editDialogIsShow: false,
        deleteDialogIsShow: false,
        currentPage: 1,
        pageInfo: {}

      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setDataFromAxios(val);
      },
      getImgUrl: function (uimg) {
        return this.$store.state.host + "/upload/images/userSchemeRecord/" + uimg;
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'warning-row';
        } else {
          return '';
        }
        return '';
      },
      setDataFromAxios (currPage) {
        if (currPage != null) {
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/api/userSchemeRecords/pageInfo?currPage=" + this.currentPage + "&pageSize=5", null, "get")
          .then(res => {
            console.log(res)
            this.userSchemeRecords = res.tList;
            this.userSchemeRecordsData();


          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      handleEditUserSchemeRecord: function (index, userSchemeRecord) {
        console.log(index + "   " + userSchemeRecord.uId);
        let _this = this;   //this代表方法调用者 this代表vue对象
        _this.editDialogIsShow = true;
        _this.$nextTick(() => {  //下一步操作
          _this.$refs.showEditUserSchemeRecord.init(userSchemeRecord);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddUserSchemeRecord）调用子组件的init方法
        })
      },

      handleAddUserSchemeRecord: function () {
        let _this = this;   //this代表方法调用者 this代表vue对象
        _this.addDialogIsShow = true;
        _this.$nextTick(() => {  //下一步操作
          _this.$refs.showAddUserSchemeRecord.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddUserSchemeRecord）调用子组件的init方法
        })
      },
      handleDeleteUserSchemeRecord: function (index, userSchemeRecord) {
        let _this = this;
        _this.deleteDialogIsShow = true;
        _this.$nextTick(() => {
          _this.$refs.showdeleteUserSchemeRecord.init(userSchemeRecord);
        })
      },

      procesDate(date) {

       var date = new Date(date)
        console.log(date)
        date  = utilsFd.FD.Fd().format(date)

        return date
      },
      userSchemeRecordsData() {
        for (var i = 0; i < this.userSchemeRecords.length; i++) {
          this.userSchemeRecords[i].usrdate = this.procesDate(this.userSchemeRecords[i].usrdate);
          this.userSchemeRecords[i].usrtime = this.procesDate(this.userSchemeRecords[i].usrtime);
          //console.log(this.user.orderForms[i].uresdate)
        }
      },


    },
    created: function () {
      this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
    }
  }
</script>

<style scoped lang="stylus">
  .main
    width 1000px
    margin 0 auto

  /deep/ .warning-row /*不写deep渲染出错*/
    background-color oldlace
</style>
